<template>
  <div class="ant-spin-nested-loading">
    <div class="buttonbox">
      <h3>账号信息</h3>
      <div>
        <!-- <div class="bl_button" @click="onAdd">修改密码</div> -->
        <el-button size="small" class="el_button" @click="onpasss">
          修改密码
        </el-button>
        <el-button size="small" class="el_button" @click="onmobile">
          修改手机号
        </el-button>
      </div>
    </div>
    <div class="line"> </div>
    <div class="textbox">
      <div class="textbox-item" style="height: 60px;line-height: 60px;">
        <div>头像</div>
        <div>
          <div class="portrait">
            <el-image :src="src" v-if="addForm.avatar == 1"></el-image>
            <el-image :src="src2" v-else-if="addForm.avatar == 2"></el-image>
            <el-image :src="src3" v-else-if="addForm.avatar == 3"></el-image>
            <el-image :src="src4" v-else-if="addForm.avatar == 4"></el-image>
            <el-image :src="src5" v-else-if="addForm.avatar == 5"></el-image>
            <el-image :src="src6" v-else-if="addForm.avatar == 6"></el-image>
            <el-image :src="portrait" v-else></el-image>
            <div class="xiugai">
              <span style="
                cursor: pointer;
                height: 100%;
                display: flex;
                align-items: center;
              " @click="editAvatar">修改</span>
            </div>
          </div>
        </div>
      </div>

      <div class="textbox-item">
        <div>用户名</div>
        <div>{{ addForm.userName }}</div>
      </div>
      <div class="textbox-item">
        <div>角色</div>
        <div>{{ addForm.roleDescription }}</div>
      </div>
      <div class="textbox-item">
        <div>昵称</div>
        <div>{{ addForm.nickname }}</div>
      </div>
      <div class="textbox-item">
        <div>手机号</div>
        <div>{{ addForm.mobile }}</div>
      </div>
      <!-- <div class="textbox-item"  v-if="
          user.roleName != 'SUPER_ADMIN' && user.roleName != 'PLATFORM_ADMIN'
        ">
            <div>租户</div><div>{{addForm.tenantName}}</div>
        </div> -->
    </div>
    <div v-if="user.roleName == 'ORG_ADMIN'">
      <div class="buttonbox">
        <h3>所属机构信息</h3>
      </div>
      <div class="line"> </div>
      <div class="textbox">
        <div class="textbox-item">
          <div>机构名称</div>
          <div>{{ tableData[0].orgName }}</div>
        </div>
        <!-- <div class="textbox-item">
          <div>机构属性</div>
          <div>{{ tableData[0].typeName }}</div>
        </div> -->
        <div class="textbox-item">
          <div>负责人姓名</div>
          <div>{{ tableData[0].username }}</div>
        </div>
        <div class="textbox-item">
          <div>负责人手机号</div>
          <div>{{ tableData[0].mobile }}</div>
        </div>
      </div>
    </div>
    <div v-if="user.roleName == 'UNIT_ADMIN'">

      <div class="buttonbox">
        <h3>上级机构信息</h3>
      </div>
      <div class="line"> </div>
      <div class="textbox">
        <div class="textbox-item">
          <div>机构名称</div>
          <div>{{ orgSupInfo.orgName }}</div>
        </div>
        <!-- <div class="textbox-item">
            <div>机构属性</div><div>{{orgSupInfo.typeName}}</div>
        </div> -->
        <div class="textbox-item">
          <div>负责人姓名</div>
          <div>{{ orgSupInfo.username }}</div>
        </div>
        <div class="textbox-item">
          <div>负责人手机号</div>
          <div>{{ orgSupInfo.mobile }}</div>
        </div>
      </div>
    </div>

    <!-- <el-form :model="addForm" ref="refAddForm" label-width="130px">
      <el-form-item size="small" label="头像">
        <div class="portrait">
          <el-image :src="src" v-if="addForm.avatar == 1"></el-image>
          <el-image :src="src2" v-else-if="addForm.avatar == 2"></el-image>
          <el-image :src="src3" v-else-if="addForm.avatar == 3"></el-image>
          <el-image :src="src4" v-else-if="addForm.avatar == 4"></el-image>
          <el-image :src="src5" v-else-if="addForm.avatar == 5"></el-image>
          <el-image :src="src6" v-else-if="addForm.avatar == 6"></el-image>
          <el-image :src="portrait" v-else></el-image>
          <div class="xiugai">
            <span
              style="
                cursor: pointer;
                height: 100%;
                display: flex;
                align-items: center;
              "
              @click="editAvatar"
              >修改</span
            >
          </div>
        </div>
      </el-form-item>
      <el-form-item size="small" label="用户名">
        <el-input
          clearable
          v-model.trim="addForm.userName"
          maxlength="20"
          disabled
          style="width: 100%"
        >
        </el-input>
      </el-form-item>
      <el-form-item size="small" label="角色">
        <el-input
          clearable
          v-model.trim="addForm.roleDescription"
          maxlength="20"
          disabled
          style="width: 100%"
        >
        </el-input>
      </el-form-item>
      <el-form-item size="small" label="昵称" prop="nickname">
        <el-input
          clearable
          v-model.trim="addForm.nickname"
          placeholder="请输入"
          maxlength="20"
          style="width: 100%"
        >
        </el-input>
      </el-form-item>
      <el-form-item size="small" label="手机号">
        <el-input
          clearable
          v-model.trim="addForm.mobile"
          maxlength="20"
          disabled
          style="width: 100%"
        >
        </el-input>
      </el-form-item>
      <el-form-item
        size="small"
        label="租户"
        v-if="
          user.roleName != 'SUPER_ADMIN' && user.roleName != 'PLATFORM_ADMIN'
        "
      >
        <el-input
          clearable
          v-model.trim="addForm.tenantName"
          maxlength="20"
          disabled
          style="width: 100%"
        >
        </el-input>
      </el-form-item>
     
      <el-row v-if="user.roleName != 'SUPER_ADMIN' && user.roleName != 'PLATFORM_ADMIN'">
        <el-col :span="12">
          <el-form-item size="small" label="机构名称">
            <el-input
              clearable
              v-model.trim="spacesManage.organizationInfo.orgName"
              maxlength="20"
              disabled
              style="width: 100%"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item size="small" label="机构属性">
            <el-input
              clearable
              v-model.trim="spacesManage.organizationInfo.typeName"
              maxlength="20"
              disabled
              style="width: 100%"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row
        v-if="
          user.roleName != 'SUPER_ADMIN' && user.roleName != 'PLATFORM_ADMIN'
        "
      >
        <el-col :span="12">
          <el-form-item size="small" label="负责人姓名">
            <el-input
              clearable
              v-model.trim="spacesManage.organizationInfo.username"
              maxlength="20"
              disabled
              style="width: 100%"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item size="small" label="负责人手机号">
            <el-input
              clearable
              v-model.trim="spacesManage.organizationInfo.mobile"
              maxlength="20"
              disabled
              style="width: 100%"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row v-if="spacesManage.organizationInfo.parentId && spacesManage.organizationInfo.parentId!=0">
        <el-col :span="12">
          <el-form-item size="small" label="上级机构">
            <el-input
              clearable
              v-model.trim="orgSupInfo.orgName"
              maxlength="20"
              disabled
              style="width: 100%"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item size="small" label="上级机构属性">
            <el-input
              clearable
              v-model.trim="orgSupInfo.typeName"
              maxlength="20"
              disabled
              style="width: 100%"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row v-if="spacesManage.organizationInfo.parentId && spacesManage.organizationInfo.parentId!=0">
        <el-col :span="12">
          <el-form-item size="small" label="上级负责人姓名">
            <el-input
              clearable
              v-model.trim="orgSupInfo.username"
              maxlength="20"
              disabled
              style="width: 100%"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item size="small" label="上级负责人手机号">
            <el-input
              clearable
              v-model.trim="orgSupInfo.mobile"
              maxlength="20"
              disabled
              style="width: 100%"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="closeAddDialog" class="cancel-button"
        >取 消</el-button
      >
      <el-button
        size="small"
        @click="addSubmit"
        v-preventReClick="1000"
        class="confirm-button"
        >确 定</el-button
      >
    </div> -->
    <editAvatar ref="refeditAvatar" @onAvatar="onAvatar"></editAvatar>
    <updatePassword ref="refPassword"></updatePassword>
    <updateMobile ref="refMobile"></updateMobile>

  </div>
</template>

<script>
import { updateUser, reqOrgSuperLevelInfo, reqOrgList } from "@api/api";
import { mapState } from "vuex";
import editAvatar from "../../../views/personal2/components/editAvatar.vue";
import updatePassword from "../updatePassword.vue";
import updateMobile from "../updateMobile.vue";
import { handleTree, transTree } from "@utils/trans-tree";

export default {
  components: {
    editAvatar,
    updatePassword,
    updateMobile,
  },
  data() {
    return {
      src: require("@assets/images/touxiang1.png"),
      src2: require("@assets/images/touxiang2.png"),
      src3: require("@assets/images/touxiang3.png"),
      src4: require("@assets/images/touxiang4.png"),
      src5: require("@assets/images/touxiang5.png"),
      src6: require("@assets/images/touxiang6.png"),
      dialogVisible: false,
      addForm: {
        avatar: "",
        userName: "",
        roleDescription: "",
        nickname: "",
        mobile: "",
        tenantName: "",
      },
      portrait: require("@assets/images/portrait.png"),
      // 表单验证规则
      dataList: [],

      projectList: [], //单位数据
      sysInstanceIndex: 1,
      sysInstanceTotalPages: 10,
      loading: false,
      orgSupInfo: {
        username: "",
        mobile: "",
        typeName: "",
        orgName: "",
        type: ""
      },
      tableData: []
    };
  },
  computed: {
    ...mapState(["user", "spacesManage"]),
  },
  watch: {},
  methods: {
    onpasss() {
      this.$refs.refPassword.dialogVisible = true;
    },
    onmobile() {
      this.$refs.refMobile.dialogVisible = true;
    },
    // 查询上级组织机构信息
    async getOrgSuperLevelInfo() {
      // if (!this.spacesManage.organizationInfo.parentId && this.spacesManage.organizationInfo.parentId != 0) return
      const res = await reqOrgSuperLevelInfo(this.tableData[0].parentId);
      // console.log("查询上级组织机构信息", res);
      this.orgSupInfo = res.data.row;
      // console.log(this.orgSupInfo, "this.orgSupInfo");
      // if (this.orgSupInfo.type == "1") {
      //   this.orgSupInfo.typeName = "联网单位";
      // } else if (this.orgSupInfo.type == "2") {
      //   this.orgSupInfo.typeName = "维保单位";
      // } else if (this.orgSupInfo.type == "3") {
      //   this.orgSupInfo.typeName = "监管单位";
      // } else if (this.orgSupInfo.type == "4") {
      //   this.orgSupInfo.typeName = "经销商";
      // } else if (this.orgSupInfo.type == "5") {
      //   this.orgSupInfo.typeName = "工程商";
      // } else if (this.orgSupInfo.type == "6") {
      //   this.orgSupInfo.typeName = "代理商";
      // }
    },
    async getInfo() {
      this.addForm.avatar = this.user.avatar;
      this.addForm.userName = this.user.userName;
      this.addForm.roleDescription = this.user.roleDescription;
      this.addForm.nickname = this.user.nickName;
      this.addForm.mobile = this.user.mobile;
      this.addForm.tenantName = this.user.tenantName;
      if (this.user.roleName == 'ORG_ADMIN' || this.user.roleName == 'UNIT_ADMIN') {
        await this.getOrgList()
      }
      if (this.user.roleName == 'UNIT_ADMIN') {
        await this.getOrgSuperLevelInfo();
      }
    },
    // 获取列表
    async getOrgList() {
      let res = await reqOrgList({
        userId: this.user.userId,
        roleName: this.user.roleName,
        tenantId: this.user.tenantId,
        orgName: '',
        type: "1,2,3,4"
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      let { rows } = res.data;
      this.tableData = transTree(rows);//后端接口返回全部数据
      // console.log(this.tableData,'this.tableData');
    },
    // 修改头像
    editAvatar() {
      this.$refs.refeditAvatar.dialogVisible = true;
    },
    // 获取头像
    onAvatar(e) {
      this.addForm.avatar = e;
    },
    addUserId() {
      this.$refs.refaddUserId.innerVisible = true;
    },

    // 点击新增
    addSubmit() {
      this.$refs.refAddForm.validate(async (valid) => {
        if (!valid) return;
        this.addForm.id = this.user.userId;
        const res = await updateUser(this.addForm);
        if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
        this.$store.commit("saveAvatar", this.addForm.avatar);
        this.$store.commit("saveNickName", this.addForm.nickname);
        this.$modal.notifySuccess("操作成功");
        this.closeAddDialog();
      });
    },
    // 点击关闭弹框
    closeAddDialog() {
      this.$refs.refAddForm.resetFields();
      this.$emit("closeAddDialog");
    },
  },
  created() { },
  mounted() { },
};
</script>

<style lang="less" scoped>
@import url("../../../views/common.less");

.ant-spin-nested-loading {
  margin-left: 10px;
  height: 500px;
  overflow-y: auto;
}

.buttonbox {
  color: @primaryContentTxt;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .el_button {
    background: #7367f0;
    color: #fff;
    border: none;
  }

}

.line {
  background-color: @primaryBorderColor6;
  height: 1px;
  width: 100%;
}

.textbox {
  // height: 100%;
  overflow-y: auto;
  margin-top: 15px;
}

.textbox-item {
  display: flex;
  height: 26px;
  line-height: 26px;
  color: #fff;
  margin-bottom: 10px;

  >div:first-of-type {
    width: 115px;
    color: @primaryThemeTxtColor2;
  }

  >div:last-of-type {
    color: @primaryContentTxt;
  }
}

.portrait {
  min-width: 60px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  text-align: center;
  position: relative;
  overflow: hidden;
  z-index: 10;

  .el-image {
    border-radius: 50%;
    width: 60px;
    height: 60px;
  }

  &:hover .xiugai {
    height: 30%;
    display: flex;
  }

  .xiugai {
    display: none;
    transition: all 0.2s ease-out 0s;
    position: absolute;
    opacity: 0.75;
    background: rgb(24, 24, 24);
    color: rgb(255, 255, 255);
    bottom: 0;
    height: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    z-index: 99;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
}

::v-deep .el-input.is-disabled .el-input__inner {
  color: #858585 !important;
}

.dialog-footer {
  text-align: right;
}
</style>
